/**
 * @flow
 */

import React, {useEffect} from 'react'

// prettier-ignore
import {
  Text,
  View,
  Image,
  Platform,
  StatusBar,
  StyleSheet,
  TouchableOpacity,
} from 'react-native'

import {useNavigation} from '@react-navigation/native'

import PPC from '../RxPageConfig'
import RxColors from '../../../commons/styles/RxColors'
import RxStyle from '../../../commons/styles/RxStyle'
import * as RxImages from '../../../commons/imgs/BundleImgMap'
import StatusBarUtil from '../../../commons/utils/StatusBarUtil'

const backImage = RxImages.i_navigation_back
const barTopSpace = StatusBarUtil.getHeight()

const OnTouch = ({children, style, onPress}) => {
  return (
    <TouchableOpacity style={style} onPress={onPress}>
      {children}
    </TouchableOpacity>
  )
}

const RxNavBar = props => {
  // console.log('RxNavBar -> props=', props)
  useEffect(() => {
    if (Platform.OS === 'android') {
      console.log('导航栏透明')
      StatusBar.setTranslucent(true)
      // StatusBar.setBackgroundColor('blue', true)
    }
  })

  const renderLeft = () => {
    // console.log('renderLeft =', props.isHiddenLeft)
    if (props.isHiddenLeft) {
      return null
    }
    const leftView = props.leftView
    if (leftView) {
      return (
        <OnTouch style={styles.left} onPress={props.onLeftPress}>
          {leftView}
        </OnTouch>
      )
    } else {
      return (
        <OnTouch style={styles.left} onPress={props.onLeftPress}>
          <View style={styles.defaultLeft}>
            <Image source={backImage}></Image>
            {/* <View style={{height: 10, width: 10, backgroundColor: 'orange'}} /> */}
          </View>
        </OnTouch>
      )
    }
  }

  const renderLeftClose = () => {
    return null
  }

  const renderRight = () => {
    if (props.isHiddenRight) {
      return <View style={styles.rightSpace}></View>
    }
    const rightView = props.rightView
    if (rightView) {
      return <OnTouch onPress={props.onRightPress}>{rightView}</OnTouch>
    }
    const rightText = props.rightText
    if (rightText) {
      return (
        <OnTouch onPress={props.onRightPress}>
          <Text style={styles.rightText}>{rightText}</Text>
        </OnTouch>
      )
    }
  }

  const renderTitle = () => {
    const {titleView, title} = props
    if (titleView) {
      return titleView
    }
    return <Text style={styles.title}>{title}</Text>
  }

  return (
    <View style={[styles.bar, {backgroundColor: props.backgroundColor}]}>
      <View style={styles.statusBarIOS} />
      <View style={styles.container}>
        <View style={styles.titleView}>{renderTitle()}</View>
        <View style={styles.side}>
          <View style={styles.leftView}>
            {renderLeft()}
            {renderLeftClose()}
          </View>
          {renderRight()}
        </View>
      </View>
    </View>
  )
}

RxNavBar.prototype = PPC.navbar.prototype
RxNavBar.defaultProps = PPC.navbar.defaultProps

export default RxNavBar

const barHeight = 44
const styles = StyleSheet.create({
  bar: {
    position: 'relative',
    height: barHeight + barTopSpace,
  },
  statusBarIOS: {
    height: barTopSpace,
    width: '100%',
    backgroundColor: 'red',
  },
  container: {
    flex: 1,
    height: barHeight,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 10,
    paddingTop: 15,
    position: 'relative',
    // overflow: 'hidden',
  },
  title: {
    fontSize: 18,
    height: barHeight,
    fontFamily: RxStyle.TextFont,
    color: RxColors.White,
  },
  side: {
    position: 'absolute',
    height: barHeight,
    left: 15,
    right: 15,
    top: 0,
    flex: 1,
    paddingTop: 15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  left: {
    height: barHeight,
  },
  leftView: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  defaultLeft: {
    width: 24,
    height: 24,
    // backgroundColor: 'red',
  },
  rightSpace: {
    width: 10,
    height: barHeight,
  },
  right: {
    height: barHeight,
    alignItems: 'center',
    justifyContent: 'center',
  },
  rightText: {
    alignItems: 'center',
  },
})
